<template>
  <div>
    <NotifyHeader></NotifyHeader>
    <div class="chat-view">
      <div class="view" v-for="(value, key, index) in list" :key="index">
        <a href="#">
          <img
            :alt="value.formUser"
            src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/f5188ac005a69d272fc6161b3c521d15.svg"
            class="lazy avatar avatar"
          />
        </a>
        <div class="right">
          <div class="top">
            <div class="content">
              <div class="profile">
                <span class="title">
                  你的
                  <a href="">
                    <a href="">
                      <span class="title-article"> 沸点 </span>
                    </a> </a
                  >已被推荐至发现页
                </span>
              </div>
              <div class="bottom">
                <span>7分钟前</span>
              </div>
            </div>
            <div class="cover-image-wrap bgc">
              <a href="">
                <div class="cover-image mg">{{ value.title }}</div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NotifyHeader from '@/components/notify-header.vue';
export default {
  data() {
    return {
      list: [
        {
          formUser: '给me一支烟', // xxx to xxx
          status: 0, // 0评论 1回复
          content:
            'angularaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', // 评论内容
          url: '/pin/7121524004212441125', // 沸点路由
          date: 1, // 发布时间
          title:
            '前端什么shgihsihgdadafdafasdsafsadfafdasdsadfa,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,.', // 发布的沸点标题
          isLike: 0, // 0 无 1 有
        },
        {
          formUser: '给me一支烟', // xxx to xxx
          status: 1, // 0评论 1回复
          content: 'angular', // 评论内容
          url: '/pin/7121524004212441125', // 沸点路由
          date: 1, // 发布时间
          title: '前端什么.testestsstesssssssssssssssssssssssss..', // 发布的沸点标题
          isLike: 0, // 0 无 1 有
        },
        {
          formUser: '给me一支烟', // xxx to xxx
          status: 1, // 0评论 1回复
          content: 'angular', // 评论内容
          url: '/pin/7121524004212441125', // 沸点路由
          date: 1, // 发布时间
          title: '前端什么...', // 发布的沸点标题
          isLike: 0, // 0 无 1 有
        },
        {
          formUser: '给me一支烟', // xxx to xxx
          status: 0, // 0评论 1回复
          content: 'angular', // 评论内容
          url: '/pin/7121524004212441125', // 沸点路由
          date: 1, // 发布时间
          title: '前端什么...', // 发布的沸点标题
          isLike: 0, // 0 无 1 有
        },
      ],
    };
  },
  components: {
    NotifyHeader,
  },
};
</script>

<style lang="scss" scoped>
.chat-view {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.view {
  background-color: white;
  width: 700px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
  padding: 1.67rem;
  display: flex;
  margin-bottom: 0.67rem;
}
a {
  text-decoration: none;
  cursor: pointer;
  color: #909090;
}
.avatar {
  width: 45px;
  height: 45px;
  border-radius: 100%;
  margin-right: 2rem;
}
.lazy {
  position: relative;
  object-fit: cover;
}
img {
  border-style: none;
}
.right {
  display: flex;
  flex: 1;
  flex-direction: column;
  .top {
    display: flex;
    .content {
      flex: 1;
      margin-right: 1.67rem;
      .profile {
        margin-bottom: 10px;
        .name {
          color: #2e3135;
          font-size: 15px;
          font-weight: 500;
        }
        .title {
          font-size: 15px;
          font-weight: 400;
          .title-article {
            color: #007fff;
          }
          a {
            background-color: transparent;
          }
        }
      }
      .comment {
        font-size: 15px;
        padding: 10px;
        margin-bottom: 10px;
        background-color: #fafbfc;
        border-radius: 3px;
        border: 1px solid #f1f1f2;
        word-break: break-all; // 以字母为换行依据
      }
    }
    .cover-image-wrap {
      width: 65px;
      height: 65px;
      box-sizing: border-box;
      border-radius: 2px;
      word-break: break-all;
      .cover-image {
        object-fit: cover;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        font-size: 14px;
        line-height: 18px;
        font-weight: 400;
        color: #8a9aa9;
      }
    }
  }
  .bottom {
    font-size: 0.99rem;
    display: flex;
    color: #8a9aa9;
    justify-content: space-between;
    .action {
      display: flex;
      align-items: center;
      .action-item {
        display: flex;
        align-items: center;
        margin-left: 20px;
        cursor: pointer;
        .action-text {
          margin-left: 5px;
          font-size: 13px;
        }
      }
      :hover {
        color: #1e80ff;
        path {
          fill: #1e80ff;
        }
      }
    }
  }
}
.bgc {
  background: #f4f4f4;
}
.mg {
  width: calc(100% - 8px);
  margin: 4px;
  height: 56px;
}
</style>
